<template>
	<view class="page">
		<view class="p-4 flex flex-column grid-gap-6">
			<view class="flex bg-white rounded-4 p-2 ">
				<view class="flex-1 text-center py-4 rounded-4">
					<view class="text-primary font-weight-600 h8">{{ dealer.user.people_num }}</view>
					<view class="h10 text-grey mt-2">邀请人数</view>
				</view>
				<view class="flex-1 text-center py-4 rounded-4">
					<view class="text-primary font-weight-600 h8">{{ dealer.user.order_price }}</view>
					<view class="h10 text-grey mt-2">订单总额</view>
				</view>
				<view class="flex-1 text-center py-4 rounded-4">
					<view class="text-primary font-weight-600 h8">{{ dealer.user.price }}</view>
					<view class="h10 text-grey mt-2">累计收益</view>
				</view>
			</view>
			<view class="bg-white p-6 rounded-6 flex flex-center">
				<view class="flex-1 flex">
					<view class="mr-6 text-danger">
						<view class="h10">订单</view>
						<view class="pt-4 h2 font-weight-600">{{ dealer.config.proportion }}%</view>
					</view>
					<view class="flex-1" v-if="dealer.config.level >= 1">
						<view class="h10">一级</view>
						<view class="pt-4 h6 font-weight-600">{{ dealer.config.proportion_level_1 }}%</view>
					</view>
					<view class="flex-1" v-if="dealer.config.level >= 2">
						<view class="h10">二级</view>
						<view class="pt-4 h6 font-weight-600">{{ dealer.config.proportion_level_2 }}%</view>
					</view>
					<view class="flex-1" v-if="dealer.config.level >= 3">
						<view class="h10">三级</view>
						<view class="pt-4 h6 font-weight-600">{{ dealer.config.proportion_level_3 }}%</view>
					</view>
				</view>
			</view>
			<view class="bg-white rounded-6 p-6 flex flex-column">
				<view class="flex flex-center pb-6 border-bottom">
					<view class="flex-1 h6 font-weight-600">分销链接</view>
					<view class="h10 text-primary" @tap="$page.open('/dealer/pages/index/poster')">分享海报</view>
				</view>
				<!-- #ifdef H5 -->
				<view class="py-4 flex flex-y-center" @tap="copyLink">
					<uni-icons type="link" color="var(--xl-primary)" :size="20" />
					<view class="text-primary flex-1 text-ellipsis-1 ml-2">{{ dealer.link }}</view>
					<view class="p-4 font-weight-600 text-primary h9">复制</view>
				</view>
				<view class="text-center mb-4 pt-4">
					<image v-if="dealer.qrcode" :src="dealer.qrcode" class="qrcode border rounded-4" />
				</view>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<view class="text-center mb-4 pt-4">
					<image v-if="dealer.qrcode" :src="dealer.qrcode + '&platform=mp-weixin'"
						class="qrcode border rounded-4" show-menu-by-longpress />
				</view>
				<!-- #endif -->
				<view class="text-placeholder h9 mb-4">
					如果客户通过该链接注册本平台 ， 该客户将永久綁定为您的下级客户 ， 该客户在该平台的所有消订单会按照当前分销比例返还到您的账户中
				</view>
				<view class="text-danger h9 mb-4">
					分销奖励计算公式：订单金额 * 订单比例 * 分销比例
				</view>
				<view class="text-placeholder h9">
					如：订单金额100元，订单比例为20%，一级分销比例为50%，则分销奖励为：100 * 20% * 50% = 10元
				</view>
			</view>
			<view class="bg-white rounded-4 p-4 flex flex-column">
				<text class="h8 font-weight-600 text-primary">常用功能</text>
				<view class="flex-1 grid-gap-4 grid-columns-8 py-2">
					<view class="flex flex-column grid-column-2 flex-center grid-gap-2 hover-bg rounded-4 py-2"
						v-for="(item, index) in menu" :key="index" @tap="$page.open(item.page, true)">
						<image :src="item.icon" mode="scaleToFill" style="width: 30px;height: 30px;" />
						<text class="h9 font-weight-500">{{ item.name }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { onLoad, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
import { $page, $api } from '@/utils';
const dealer = ref({
	state: null,
	link: '',
	qrcode: '',
	user: {
		people_num: '--',
		order_num: '--',
		order_price: '--',
		price: '--',
	},
	config: {
		apply: 'yes',
		apply_price: '',
		apply_refund: '',
		apply_refund_text: '',
		level: 0,
		proportion: 0,
		proportion_level_1: 0,
		proportion_level_2: 0,
		proportion_level_3: 0,
	},
})
const menu = ref([
	{
		name: '我的团队',
		icon: '/static/icons/user/people.png',
		page: '/dealer/pages/index/people'
	},
	{
		name: '财务明细',
		icon: '/static/icons/user/bill.png',
		page: '/dealer/pages/user/wallet/log'
	},
	{
		name: '提现',
		icon: '/static/icons/user/withdrawal.png',
		page: '/dealer/pages/user/wallet/withdrawal'
	}
]);
onLoad((options: any) => {
	getDealer();
})
onShareAppMessage(() => {
	return $page.shareMessage({
		path: `/pages/index/index`
	})
})
onShareTimeline(() => {
	return $page.shareTimeline({
		path: `/pages/index/index`
	})
})
const getDealer = () => {
	$api.Dealer.dealer().then((data: any) => {
		dealer.value = data;
	})
}
const copyLink = () => {
	uni.setClipboardData({
		data: dealer.value.link
	})
}
</script>

<style lang="scss" scoped>
.page {
	min-height: calc(100vh - var(--window-top));
}

.qrcode {
	width: 200px;
	height: 200px;
}
</style>
